/*
* @Author: Yejing
* @Date: 2023-05-29 17:19:09
* @LastEditors: Yejing
* @LastEditTime: 2023-05-29 17:19:24
* @Description: 视频组件
*/

<template>
	<view class="video-card-container" @click="videoInfo()">
		<!-- {{details}} -->
		<u-image :width="imgWidth" :height="imgHeight" shape='square' :src="details.img"></u-image>
		<view class="watch-box">
	
			<u-icon name="play-right" size="30" color="#fff"></u-icon>
			<c-number class="watch" :val="details.watch"></c-number>
		</view>
	</view>
</template>

<script>
	export default {
		name: "anchorCard",
		props: {
			details: {
				default: () => ({}),
				type: Object
			},
			imgWidth:{
				default: '217rpx',
				type: String
			},
			imgHeight:{
				default: '217rpx',
				type: String
			},
			
		},
		data() {
			return {

			};
		},
		methods: {
			videoInfo() {
				this.$emit('videoInfo')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-card-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
		width: 217rpx !important;
		height: 217rpx !important;

		/deep/uni-video {
			width: 217rpx !important;
			height: 217rpx !important;
		}

		.watch-box {
			position: absolute;
			bottom: 20rpx;
			left: 10rpx;
			.watch {
				color: #fff;
				// font-size: 24rpx;
			}

			.u-icon {
				z-index: 999;
			}
		}



	}
</style>